<script setup lang="ts">
import { ref, defineOptions } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import TopTitle from '@/components/TopTitle.vue'
import axios from 'axios';
import {user} from '@/store/storeName.ts'
import { showToast } from 'vant';
defineOptions({
    name: "login"
})
const route = useRoute()
const router = useRouter();
const store = user();
/**
 * 定义图形验证码
 */
const num = ref('')
const createNum = function () {
    let nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    let str = "";
    let i = 0;
    while (i <= 4) {
        str += nums[Math.floor(Math.random() * nums.length)];
        i++;
    }
    num.value = str
    console.log(num)
}
createNum();
//用户输入的验证码
const textNum = ref("")
//用户输入的短信验证码
const msgNum = ref("")
/**
 * 获取验证码时倒数的
 */
const msgTimes = ref(3)
const msgTrueNum = ref("")
const changeMsgTimes = ()=>{
    msgTimesFlag.value = true
    
    
    let timer = setInterval(()=>{
        if(msgTimes.value !== 0){
            msgTimes.value -= 1
        }else{
            msgTimesFlag.value = false
            msgTimes.value = 3
            msgTrueNum.value = (Math.random()+"").split(".")[1].slice(0,5)
            showToast("验证码:"+msgTrueNum.value)
            console.log(msgTrueNum.value);
            clearInterval(timer)
        }
    },1000)
}
const msgTimesFlag = ref(false)
/***
 * 获取焦点时的事件
 */
const focus = ref("")
const getFocus = function (target: string) {
    focus.value = target
}
//手机号码
const phone = ref("")
/***
 * 登录验证
 */
const tips = ref("")
const loginTest = function () {
    let reg = /^1[3456789]\d{9}$/;
    if (!reg.test(phone.value)) {
        tips.value = "请输入正确的手机号码"
    } else if (textNum.value !== num.value) {
        tips.value = "图形验证码错误";
    } else if(msgNum.value !== msgTrueNum.value){
        tips.value = "短信验证码错误"
    }else {
        tips.value = "";
        axios.post("/h5/login?phone=" + phone.value)
            .then(res => {
                console.log(res)
                store.changeToken(res.data.token)
                store.changeUser(res.data)
                router.replace(`${route.query.to}`)
                showToast('登录成功')
            })
    }
}
</script>
<template>
    <div id="loginBox">
        <div class="container">
            <TopTitle :flag="true"></TopTitle>
            <img src="@/assets/宇航员.png" alt="">
            <div class="loginInput">
                <div :class="phone ? 'show text' : 'text'">手机号</div>
                <input type="text" v-model="phone" @focus="getFocus('phone')" :class="focus === 'phone' ? 'focus' : ''"
                    placeholder="请输入您的手机号">
                <div :class="textNum ? 'show text' : 'text'">图形验证码</div>
                <div class="num">
                    <input type="text" @focus="getFocus('textNum')" :class="focus === 'textNum' ? 'focus' : ''"
                        v-model="textNum" placeholder="请输入图形验证码">
                    <img :src="'http://www.zijizhu.cn/randomCaptcha?no=' + num" alt="">
                </div>
                <div :class="msgNum ? 'show text' : 'text'">短信验证码</div>
                <div class="msg">
                    <input type="text" placeholder="请输入短信验证码"
                    v-model="msgNum"
                    @focus="getFocus('msg')"
                    :class="focus === 'msg' ? 'focus' : ''"
                    >
                    <div class="getMsg" @click="changeMsgTimes" v-if="!msgTimesFlag">获取验证码</div>
                    <div class="getMsg" v-else>获取验证码{{ msgTimes }}s</div>
                </div>
                <div class="tips" v-show="tips">{{ tips }}</div>
            </div>
            <div class="btn">
                <van-button type="danger" @click="loginTest" :color="phone && textNum ? 'red' : '#eeeeee'"
                    size="large">完成</van-button>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
#loginBox {
    background-color: white;
    width: 100vw;
    height: 100vh;

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        >img {
            width: 30vw;
            display: block;
            border-radius: 50%;
            background-color: #f7f7f7;
            margin: 10vw;
        }

        .btn {
            width: 100%;
            margin: 10vw 0;
        }

        .tips {
            color: red;
            font-size: 12px;
            width: 100%;
        }

        input {
            border: none;
            width: 100%;
            display: block;
            background-color: white;
            border-bottom: 1px solid #f7f7f7;
            transition: 0.5s;
            padding-bottom: 2vw;
        }

        .text {
            transition: .5s;
            position: relative;
            top: 8vw;
            opacity: 0;
            margin-top: 5vw;
            z-index: -1;
            font-size: 14px;
            font-weight: 200;
        }

        .show {
            top: 0;
            opacity: 1;
            z-index: 1;
        }

        .focus {
            border-bottom: 1px solid red;
        }

        .num,.msg {
            width: 100%;
            display: flex;
            justify-content: space-between;

            input {
                margin-right: 5vw;
            }
            .getMsg{
                color: red;
                font-size: 14px;
                width: 40vw;
                text-align: center;
            }
        }
        .msg{
            // margin-top: 5vw;
            // position: relative;
        }
    }
}
</style>